<template>
    <div class="login">
        <van-notify v-model="show" type="success" background="#A48652" color="#fff" duration="0" position="top">
            <span style="font-size: .24rem;">第一次登录，请修改密码</span>
        </van-notify>
        <van-image class="login-bg" :src="require('@/assets/image/els/order-bg.png')"></van-image>
        <div class="login-content">
            
            <!-- <div class="input">
                <van-field v-model="form.userAccount" placeholder="请输入邮箱账号" />
            </div>
            <div class="input ">
                <div class="getCode">
                    <van-field class="code-input" v-model="form.code" placeholder="请输入验证码" />
                    <van-button  plain class="code-btn" @click="getCode" :disabled="isClick">{{!isClick ? '获取邮箱验证码' : time + 's'}}</van-button>
                </div>
            </div> -->
            <div class="input">
                <van-field type="password" v-model="form.userPassword" placeholder="请输入密码" />
            </div>
            <div class="input">
                <van-field type="password" v-model="form.userPassword2" placeholder="请重新输入密码" />
            </div>
            <p class="hint">* 密码必须是6~8位数的字母和数字组合</p>
            <div class="btn">
                <van-button class="btn home-button" block @click="confirm">提交</van-button>
            </div>
            <div class="register">
                <span @click="gotoLogin">返回登录页面</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            show:false,
            value: '',
            form: {
                userAccount: '',//登录账号
                userPassword: '',//登录密码
                userPassword2: '',//确认密码
                code: '', //验证码
            },
            verifyCode: '',//验证码
            isClick: false,
            time: 60,
            passwordError: false,
            timer: null,
        }
    },
    created(){
        /*
            register: {
                register: '/acc/register', //注册接口
                sendCode: '/acc/verifycode', //发送验证码接口
                limit: '/acc/code/limit', //发送验证码倒数秒数
            }
        */
       
    },
    mounted() {
      this.showNotify()  
    },
    methods: {
        showNotify() {
            this.show = true;
            // setTimeout(() => {
            //     this.show = false;
            // }, 0);
        },
        gotoLogin(){
            this.$router.push('/login')
        },
        validateEmail() {
            
            
        },
        getCode(){
            let that = this;
            if(that.form.userAccount == ''){
                that.$toast('请输入邮箱')
                return
            } else{
                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailPattern.test(this.form.userAccount)) {
                    this.$toast('请输入有效的邮箱地址');
                    return
                }
            }
            that.$api.post(that.$url.register.sendCode, {email: that.form.userAccount,codeType:1}).then(res=>{
                console.log('...res: ',res)
                if(res.code == 'SUCCESS'){    
                    that.$toast.success('已向你的邮箱发送验证码,请注意查收')
                    that.isClick = true
                    that.timer = setInterval(()=>{
                        that.time--
                        console.log('that.time: ',that.time)
                        if(that.time == 0){
                            that.isClick = false
                            that.time = 60
                            
                            clearInterval(that.timer)
                        }
                    },1000)
                }else{
                    that.$toast.fail(res.msg)
                       
                }
            })
        },
        validatePassword() {
            const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
            this.passwordError = !regex.test(this.password);
        },
        confirm(){
            const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,8}$/;
            this.passwordError = !regex.test(this.form.userPassword);
            console.log('this.form.userPassword: ',this.form.userPassword)
            console.log('this.userPassword2: ',this.form.userPassword2)
            console.log('this.passwordError: ',this.passwordError)
            // if(this.form.userAccount == ''){
            //     this.$toast('请输入邮箱')
            //     return
            // }
            // if(this.form.code == ''){
            //     this.$toast('请输入验证码')
            //     return
            // }
            if(this.form.userPassword == ''){
                this.$toast('请输入密码')
                return
            }
            if(this.passwordError){
                this.$toast('密码必须是6~8位数的字母和数字组合')
                return
            }
            if(this.form.userPassword2 == ''){
                this.$toast('请重新输入密码')
                return
            }
            
            if(this.form.userPassword != this.form.userPassword2){
                this.$toast('两次密码输入不一致')
                return
            }
            this.$api.put(this.$url.register.password, this.form).then(res=>{
                if(res.code == 'SUCCESS'){
                    this.$toast.success('修改成功')
                    this.$store.commit('setUserInfo',res.data);
                    // clearInterval(this.timer)
                    // this.$router.push('/login')
                    this.$router.go(-1)
                }else{
                    
                }
            })
        }
    },
}
</script>

<style scoped lang='scss'>
@import "@/assets/css/variable.scss";

.login{
    background: #f4f4f4;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    .login-bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .title{
        font-size: .4rem;
        font-weight: bold;
        margin-bottom: .5rem;
    }
    .input{
        margin-bottom: 20px;
        p{
            font-size: .3rem;
            margin-bottom: 10px;
        }
        .getCode{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .code-input{
                width: 50%;
            }
            .code-btn{
                width: 45%;
                font-size: .24rem;
                border-radius: 0;
                background: #755936;
                border: 1px solid #755936;
                border-radius: .1rem;
                color: #fff;
            }
        }
    }
    
}


.login-content{
    position: relative;
    z-index: 2;
    padding: 0 .75rem;
    padding-top: 1.34rem;
    .btn{
        margin-top: .65rem;
        height: .88rem;
        border: none;
        border-radius: .5rem;
    }
    .hint{
        color: #43331E;
    }
    .register{
        text-align: center;
        margin-top: .2rem;
        span{
            font-size: .28rem;
            color: #F2CB52;
        }
    }
}

</style>

<style>
.login .login-content .input .van-cell{
    border: 1px solid #755936;
    border-radius: .1rem;
}
</style>